最新特效 | 模仿手机QQ底部导航栏Icon拖拽效果

本文作者

本文由kobeyxd123投稿。

kobeyxd123的博客地址：

http://blog.csdn.net/kobeyxd123

这个效果之前有后台问我怎么实现，终于等到有人分享，开心~~

之前玩手机QQ时发现下面的图标竟然可以拖拽，发现还蛮好玩的。于是自己也模仿着写了一个。

先上个效果图吧

实现的方式有很多，我说一下我的思路：我的思路比较简单，无非就是上下两层图片可拖动的范围和速度不一样呗（大图标拖动范围和速度小于小图标拖动范围和速度）。

备注（以第一个消息图标为例）：大图标指的是外面的气泡图标，小图标指的是气泡里面的眼睛和嘴巴图标。切图时将一张整体图片切成了这两个图标。具体可下载Demo参考里面的图片资源。

1

自定义属性

其中range为可拖动的范围（其实是倍数），默认值是1，不宜设置过大。

属性	说明
bigIconSrc	大图标资源
smallIconSrc	小图标资源
iconWidth	图标宽度
iconHeight	图标高度
range	可拖动范围

2

主要的拖动代码

这里先得到X轴拖动的距离deltaX和Y轴拖动的距离deltaY，大图标对应小半径，小图标对应大半径。然后看moveEvent方法：

方法很简单，注释结合这张图就一目了然了，主要是注意在抬起时图标复位就好了。

3

简单看一下初始化

由于图标下面一般会带文字，因此直接继承了LinearLayout，并且默认设置成了垂直排列。

在init方法中进行了布局文件的绑定，并且让该view水平居中。

这里值得注意的是onMeasure方法。由于图标可以往外拖动，所以要给ImageView一个默认的padding，不然拖动时最外面部分会消失。

然后就没啥好说了，直接看源码吧。

如果有其他的实现方式，或者代码中有什么不合理的地方，欢迎交流~

源码地址：

https://github.com/XingdongYu/QQNaviView 

欢迎star，rua~

如果你有想学习的文章直接留言，我会整理征稿。如果你有好的文章想和大家分享欢迎投稿，直接向我投递文章链接即可。

欢迎长按下图->识别图中二维码或者扫一扫关注我的公众号：